<template>
  <div id="addServe-main">
    <model-title>
        新增服务包
    </model-title>
        <div class="add-people-line">
            <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">服务名称：</div>
            </el-col>
            <el-col :span="6">
                <el-input style="width:200px" v-model="list.serve_name"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">服务类型：</div>
            </el-col>
            <el-col :span="6">
                <el-select placeholder="请选择" v-model="list.serve_dj">
                    <el-option v-for="obj in list1" :key="obj.id" :label="obj.name" :value="obj.id"></el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">订购价格：</div>
            </el-col>
            <el-col :span="6">
                <el-input style="width:200px" v-model="list.serve_price"></el-input>
            </el-col>
            </el-row>
        </div>

        <div class="add-people-line">
            <el-row :gutter="20">
            <el-col :span="2">
                <div class="inputTitle">服务对象：</div>
            </el-col>
            <el-col :span="6">
                <el-input style="width:200px" v-model="list.serve_obj"></el-input>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">服务标签：</div>
            </el-col>
            <el-col :span="6">
                <el-select placeholder="请选择" v-model="list.serve_lable">
                    <el-option v-for="obj in list2" :key="obj.id" :label="obj.name" :value="obj.id"></el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <div class="inputTitle">签约周期：</div>
            </el-col>
            <el-col :span="6">
                <el-input style="width:200px" v-model="list.serve_period"></el-input>
            </el-col>
            </el-row>
        </div>

        <div class="add-people-line">
            <el-row :gutter="20">
                <el-col :span="2">
                    <div class="inputTitle">续约情况：</div>
                </el-col>
                <el-col :span="22">
                    <div style="margin-top:10px">
                        <el-radio v-model="list.syqk" label="1">可续约</el-radio>
                        <el-radio v-model="list.syqk" label="2">不可续约</el-radio>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="add-people-line">
            <el-row :gutter="20">
                <el-col :span="2">
                    <div class="inputTitle">图片：</div>
                </el-col>
                <el-col :span="22">
                   <el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :before-remove="beforeRemove"
                            list-type="picture">
                            <el-button size="small" v-model="list.serve_img"  type="primary">点击上传</el-button>
                        </el-upload>
                </el-col>
            </el-row>
        </div>

        <div class="add-people-line">
            <el-row :gutter="20">
                <el-col :span="2">
                    <div class="inputTitle">服务介绍：</div>
                </el-col>
                <el-col :span="22">
                     <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="请输入内容"
                    v-model="list.serve_info">
                    </el-input>
                </el-col>
            </el-row>
        </div>
        <el-divider class="line"></el-divider>
        <div id="addServe-bottom">
            <el-button type="primary" @click="addServeFn">审核提交</el-button>
            <el-button @click="fanhui">返回</el-button>
        </div>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080"
import ModelTitle from '@/components/ModelTitle.vue'
export default {
  components: { ModelTitle },
  data () {
    return {
        list:{},
        list1:[{id:1,name:"初级包"},{id:2,name:"中级包"},{id:3,name:"高级包"},{id:4,name:"特需定制包"}],
        list2:[{id:1,name:"慢病护理"},{id:2,name:"高血压"},{id:3,name:"高血糖"},{id:4,name:"高血脂"}]
    }
  },
  methods:{
    fanhui(){
        this.$router.back()
    },
    addServeFn(){
        axios({
            url:"/data/addServePage",
            method:"post",
            params:{
                servePage:this.list
            }
        }).then(res =>{
            this.$message({
                message: '操作成功！！！',
                type: 'success'
            });
            this.$router.back()
        })
    },
    handlePreview(file) {
        console.log(file.name);
        this.list.serve_img="http://localhost:8080/"+file.name
    },
    servePageLoad(){
        axios({
            url:"/data/getServeById",
            method:"get",
            params:{
                id:this.$route.query.id
            }
        }).then(res =>{
            this.list = res.data
        })
    }
  },
  
  created(){
    if(this.$route.query.id!=null){
        this.servePageLoad()
    }
  }
}
</script>

<style>
    #addServe-main{
        width: 1150px;
        background: white;
        margin: 20px auto;
        box-sizing: border-box;
        padding: 10px;
    }
    .add-people-line{
        margin-bottom: 20px;
    }
    .inputTitle{
        width: 100%;
        height: 38px;
        display: flex;
        font-size: 13px;
        color: darkgray;
        align-items: center;
        justify-content: flex-end;
    }

    #addServe-bottom{
        width: 100%;
        height: 50px;
    }
    .line{
        margin-top: 0px;
        height: 0.5px;
    }
</style>